<div :class="$store.state.appPrefix + '-p-course-lesson-intro-follow'" v-loading="isPageLoading">
  <!-- 练习页面 -->
  <div v-if="pageStatus === 'exercise'" class="follow-page">
    <div class="left-box">        
      <div class="follow-box">
        <div class="follow-circle">
          <block-circle-progress ref="circleProgress" :total-milliseconds="totalTime"></block-circle-progress>
          <div class="action-btns">
            <div class="start-btn" @click="$startLive" v-if="liveStatus === 'start'">
              <i v-if="startLoading" class="el-icon-loading" />
              <img v-else src="assets/images/icon-play.png" alt="开始计时">
              开始跟读
            </div>
            <div class="live-btn" @click="$stopLive" v-if="liveStatus === 'live'">
              <img src="assets/images/icon-stop.png" alt="结束计时">
              结束跟读
            </div>
            <template v-if="liveStatus === 'over'">
              <div class="submit-btn" @click="$commitWork" >
                <img src="assets/images/icon-submit.png" alt="提交作品">
                提交作品
              </div>
              <div class="restart-btn" @click="$restartLive">
                <img src="assets/images/icon-restart.png" alt="重新开始">
                重新开始
              </div>
            </template>
          </div>
        </div>
        <div class="follow-bottom">
          <!-- <img
            v-if="!(videoInfo && videoInfo.screenshotUrl)"
            src="/assets/images/bg-follow-bottom.png" 
            alt="视频预览" 
            class="video-preview-bg"
          /> -->
          <!-- 录制组件 -->
          <video-recorder
            v-show="liveStatus !== 'over'"
            ref="videoRecorder"
            @recording-completed="onRecordingCompleted"
           ></video-recorder>
          <!-- 播放器组件 -->
          <audio-volume v-show="liveStatus === 'live'" class="audio-volume" :volume="volume"></audio-volume>
          <!-- 截图预览 -->
          <div  v-if="liveStatus === 'over'" class="over-preview">
            <img 
              :src="videoInfo && videoInfo.screenshotUrl" 
              alt="视频预览" 
              
              class="video-preview-img"
            />
            <div class="mask"></div>
            <img @click="videoPreviewModalVisible = true" src="assets/images/play-btn.png" alt="播放" class="play-icon">
          </div>
        </div>
      </div>
    </div>
    <div class="sales-language">
      <div v-if="currentLessonInfos && currentLessonInfos.salesLanguageMap" class="sales-inner">
        <div v-for="it in $initSalesLanguage(currentLessonInfos.salesLanguageMap)" class="sales-it">
          <!-- <div class="language-title">{{it.title}}</div> -->
          <div class="language-content">{{it.content}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 等待报告生成页面 -->
  <div v-if="pageStatus === 'reporting'" class="reporting-page">
    <div class="result-box">
      <img :src="percentageType === 'file' ? 'assets/images/result_1.png' : 'assets/images/result_2.png'" alt="报告生成中">
      <template v-if="commitStart === 'success'">
        <div class="result-title">{{getResultTitle}}</div>
        <el-progress v-if="percentageType !== 'error'" class="progress-bar" :percentage="percentage" :show-text="false" />
      </template>
      <template v-else>
        <div class="result-title" style="color: #f56c6c;">报告生成失败</div>
        <el-button type="primary" style="margin-top: 20px;" @click="$commitWork">重新提交</el-button>
      </template>
      <el-button v-if="percentageType === 'error'" type="primary" style="margin-top: 20px;" @click="$restartLive">重新录制</el-button>
    </div>
  </div>
  <!-- 练习完成页面 -->
   <report v-if="pageStatus === 'finished'" @restartExercise="$restartLive" :exerciseType="102" :exerciseId="exerciseId" :lessonId="currentLessonInfos.lessonId" :courseId="currentLessonInfos.courseId"></report>

   <video-preview-modal
   :visible="videoPreviewModalVisible"
    :video-url="videoInfo && videoInfo.url"
    :close-on-backdrop="true"
    @close="videoPreviewModalVisible = false"
    :screenshot-url="videoInfo && videoInfo.screenshotUrl"
  ></video-preview-modal>
</div>
